<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div style="height: 100px;width: 100px;background-color:lawngreen;" @click="change">
        <button style="background-color:red" @click.stop="changeColor">点击事件</button><br>
        <a  style="background-color: black" href="http://www.baidu.com" @click.prevent.stop="printlnA">点击跳转</a>
        <!--链接地址不加http,则为本地地址-->
    </div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            changeColor: function () {
                console.log("点击事件")
            },
            change: function () {
                console.log("div点击");
            },
            printlnA: function(){
                console.log("a标签点击");
            }
        }

    });
</script>
<!--
- .stop ：阻止事件冒泡@click.stop
- .prevent：阻止默认事件发生 <a> @click.prevent.stop
- .capture：使用事件捕获模式
- .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
- .once：只执行一次
-->
</html>